.plugin-item.card {
	padding: 0;

	.is-bulk-editing & {
		padding-left: 24px;
	}

	& ~ .notice.is-error {
		margin-bottom: 0;
	}

	input {
		margin-right: 8px;
	}

	@include breakpoint( '>660px' ) {
		padding: 0;
	}

	.plugins-list &.is-compact:last-child {
		margin-bottom: 0;
	}

	.notice.is-info {
		.notice__icon {
			display: none;
		}
	}
}

.plugin-item {
	position: relative;
	display: flex;
	overflow: hidden; // lazy clearfix

	@include breakpoint( '<480px' ) {
		flex-wrap: wrap;
	}

	&.disabled {
		opacity: 0.5;
		background: $gray-light;
	}
}

.plugin-item__link,
.plugin-item__disabled,
.plugin-item.is-placeholder {
	display: block;
	flex-grow: 1;
	padding: 16px;
	overflow: hidden; // lazy clearfix
	cursor: pointer;

	@include breakpoint( '<480px' ) {
		flex-basis: 100%;
	}
	@include breakpoint( '>660px' ) {
		padding: 24px;
	}
}

.plugin-item__link {
	.is-bulk-editing & {
		padding-left: 40px;
	}
}

.plugin-item__disabled {
	opacity: 0.5;
	background: $gray-light;
}

// Checkbox for multiselect purposes
.plugin-item__checkbox[type=checkbox] {
	position: absolute;
	top: 50%;
	margin-top: -8px;

	&:after { // Making tap area larger
		content: '';
		position: absolute;
		top: -20px;
		left: -19px;
		width: 56px;
		height: 55px;
	}
}

.plugin-item__label {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: z-index( 'root', '.plugin-item__label' );
	cursor: pointer;
}


// Wraps plugin title and secondary info in bulk edit mode
.plugin-item__info {
	margin-left: 32px;

	@include breakpoint( '>480px' ) {
		margin-left: 40px;
	}
}

// Plugin title
.plugin-item__title {
	color: $gray-dark;
	display: block;
	font-size: 14px;
	line-height: 21px;
	font-weight: 600;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: pre;

	@include breakpoint( '>480px' ) {
		font-size: 24px;
		line-height: 32px;
		font-weight: 700;
		font-family: $serif;
	}
	@include breakpoint( '<480px') {
		&[data-warnings="1"] {
			padding-right: 32px;
		}
		&[data-warnings="2"] {
			padding-right: 64px;
		}
	}

	&.is-placeholder {
		width: 56%;
		background-color: lighten( $gray, 30% );
		animation: loading-fade 1.6s ease-in-out infinite;

		&:before {
			content: ' ';
		}
	}
	.bulk-editing & {
		margin-top: -4px;

		@include breakpoint( '>480px' ) {
			margin-top: -6px;
		}
	}
}

.plugin-item__meta.has-update {
	@include breakpoint( "<480px" ) {
		& ~ .plugin-item__meta.is-warning .noticon {
			margin-right: 30px !important;
		}
	}
}

// Plugin actions and Count
.plugin-item__count,
.plugin-item__actions {
	padding: 16px;
	flex-grow: 1;
	flex-shrink: 0;
	align-self: center;

	@include breakpoint( '>480px' ) {
		flex-grow: 0;
		text-align: right;
	}

	@include breakpoint( '>660px' ) {
		padding-right: 24px;
		padding-left: 24px;
	}
}

.plugin-item__count {
	font-size: 11px;
	line-height: 18px;
	color: $gray;
	text-transform: uppercase;
}

.plugin-item__count .count {
	margin-left: 8px;
	float: right;
}

.plugin-item  .plugin-item__count,
.plugin-item .plugin-item__actions {
	display: none;

	@include breakpoint( '>480px' ) {
		display: block;
	}
}

.plugin-item__last_updated {
	color: $gray;
	font-size: 12px;
	line-height: 1;
	padding: 6px 0;
}
